<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作数据</title>
    <script src="{{ static("js/vue-2.5.16.js")}}"></script>
    <script>
        window.onload = function () {
            var vm = new Vue({
                el: '.box',
                data: {
                    str1: '',
                    list: ['zzm', 'zzm1', 'zzm2'],

                },
                methods: {
                    fnAdd: function () {
                        if (this.str1 == '') {
                            alert('输入内容不能为空');
                            return
                        }
                        this.list.push(this.str1);
                        this.str1 = ''
                    },
                    fnDelete: function (index) {
                        this.list.splice(index, 1)
                    },
                    fnUp: function (index) {
                        if(index==0){
                            return
                        }
                        data = this.list[index];
                        this.list.splice(index, 1);
                        this.list.splice(index - 1, 0, data)

                    },
                    fnDown: function (index) {
                        data = this.list[index];
                        this.list.splice(index, 1);
                        this.list.splice(index + 1, 0, data);


                    }
                }
            })
        }
    </script>
</head>
<body>
<d1>时间表</d1>
<div class="box">
    <input type="text" v-model="str1">
    <input type="button" name value="增加" @click="fnAdd">
    <ul v-for="(value,index) in list">
        {{ value }}
        <a @click="fnDelete(index)" href="javascript:">删除</a>
        <a @click="fnUp(index)" href="javascript:">上移</a>
        <a @click="fnDown(index)" eshref="javascript:">下移</a>
    </ul>
</div>
</body>
</html>